<!-- 根组件 -->
<!-- 一个 .vue 文件，包含：结构、样式、行为 -->

<template>
    <!-- Vue2 中有且仅有一个根组件，Vue3 没有限制 -->
    <div class="App">
        I am 结构
        <div class="box" @click="fn"></div>
    </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供：data（特殊）、methods、computed、watch、生命周期钩子
export default {
    created() {
        console.log("我是created")
    },
    methods: {
        fn() {
            alert("我是蓝色...")
        }
    }
}
</script>

<style lang="less">
/* 加上 lang 属性并安装依赖包，让 style 支持 less */
.App {
    width: 400px;
    height: 400px;
    background-color: pink;

    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
}
</style>